<?php /*a:2:{s:74:"C:\WebProject\nanxun-wechat-cms\application\admin\view\customer\index.html";i:1552554969;s:77:"C:\WebProject\nanxun-wechat-cms\application\admin\view\layout\scriptload.html";i:1552554969;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/../static/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/../static/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/../static/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/../static/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/../static/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="/../static/bower_components/morris.js/morris.css">
<link rel="stylesheet" href="/../static/bower_components/jvectormap/jquery-jvectormap.css">
<link rel="stylesheet" href="/../static/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="/../static/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="/../static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="/../static/bower_components/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/../static/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/../static/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="/../static/plugins/timepicker/bootstrap-timepicker.min.css">
<script src="/../static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/../static/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="/../static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/../static/bower_components/raphael/raphael.min.js"></script>
<script src="/../static/bower_components/morris.js/morris.min.js"></script>
<script src="/../static/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<script src="/../static/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/../static/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="/../static/bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<script src="/../static/bower_components/moment/min/moment.min.js"></script>
<script src="/../static/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/../static/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/../static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="/../static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/../static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/../static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/../static/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/../static/dist/js/adminlte.min.js"></script>
<script src="/../static/bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="/../static/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="/../static/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/../static/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/../static/plugins/iCheck/icheck.min.js"></script>
<link rel="stylesheet" href="/../static/plugins/iCheck/all.css">
<!--引入layui-->
<link rel="stylesheet" href="/../static/layui/css/layui.css">
<script src="/../static/layui/layui.js"></script>
<script src="/../static/tencent/tencent.js"></script>
<script src="/../static/layui/commjslib-v2.0.1.js"></script>
<script src="/../static/layui/city-picker/city-picker.data.js"></script>
<link href="/../static/layui/city-picker/city-picker.css" rel="stylesheet" />
<!--引入vue-->
<script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
<!--<script src="https://cdn.staticfile.org/vue/2.5.17/vue.min.js"></script>-->
<!--引入饿了么组件element-->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.11/theme-chalk/index.css">
<script src="https://cdn.staticfile.org/element-ui/2.4.11/index.js"></script>
<!--引入图片上传-->
<link rel="stylesheet" href="/../static/html5upload/control/css/zyUpload.css" type="text/css">
<script src="/../static/html5upload/core/zyFile.js"></script>
<script src="/../static/html5upload/control/js/zyUpload.js"></script>
<script src="/../static/html5upload/core/jq22.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
    <title>客服消息列表</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="6" style="margin-right: 10px;">
                    <el-input v-model="keyword" placeholder="消息备注">
                        <el-button @click="get_list()" slot="append">搜索</el-button>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <el-button @click="refresh()" type="primary" icon="el-icon-refresh"></el-button>
                    <el-button @click="handle_msg()" type="success">添加客服消息</el-button>
                    <el-button @click="task_view()" type="success">发送任务列表</el-button>
                    <el-button @click="del_msg_list()" type="danger">批量删除</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-table :data="table_data" border stripe style="margin-top: 10px;" v-loading="loading"
                          @selection-change="selection_change">
                    <el-table-column type="selection" width="120" label="全选"></el-table-column>
                    <el-table-column prop="id" label="ID" width="180"></el-table-column>
                    <el-table-column prop="remark" label="备注" width="220"></el-table-column>
                    <el-table-column prop="type" label="类型" width="180">
                        <template slot-scope="scope">
                            <p v-if="scope.row.type == 'news'">图文</p>
                            <p v-if="scope.row.type == 'text'">文本</p>
                            <p v-if="scope.row.type == 'mini'">小程序卡片</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="发送操作" width="250">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="account_info_view(scope.row.id)">已绑定账号</el-button>
                            <el-button size="small" type="warning" @click="send_msg(scope.row.id)">发送</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="编辑操作" width="250">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="handle_msg(scope.row.id)">编辑消息</el-button>
                            <el-button size="small" type="danger" @click="del_msg(scope.row.id)">删除消息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: center; margin-top: 10px;">
                    <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
                                   :page-sizes="[10, 15, 20, 50]" :page-size="pagesize" @size-change="size_change"
                                   @current-change="current_change"></el-pagination>
                </div>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            keyword: '',
            table_data: [], // 表格数据
            pagesize: 10, // 每页展示的数量
            total: 0, // 数据总数
            page: 1, // 当前页码
            loading: false,
            id_list: [], // 选中账号id
        },
        methods: {
            // 页码切换
            current_change(page) {
                this.page = page;
                this.get_list();
            },
            // 每页展示切换
            size_change(val) {
                this.pagesize = val;
                this.get_list();
            },
            // 选中账号
            selection_change(val) {
                arr = [];
                val.forEach(function (item) {
                    arr.push(item.id);
                });
                this.id_list = arr;
                console.log(this.id_list);
            },
            // 获取数据列表
            get_list() {
                var that = this;
                that.loading = true;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '<?php echo url("customer/get_customer_msg_list"); ?>',
                    data: {page: that.page, pagesize: that.pagesize, keyword: that.keyword},
                    success: function (res) {
                        if (res.code == 0) {
                            that.table_data = res.data.list;
                            that.total = res.data.total;
                        } else {
                            that.table_data = [];
                            that.total = 0;
                        }
                        that.loading = false;
                    },
                    error: function () {
                        that.loading = false;
                        layerAlert('发生系统错误,请与管理员联系！');
                    }
                });
            },
            // 刷新数据
            refresh() {
                this.keyword = '';
                this.get_list();
            },
            // 打开已绑定公众号界面
            account_info_view(id) {
                var url = '<?php echo url("customer/account_info_view"); ?>' + '?msgid=' + id;
                layerWindow('已绑定的账号列表', url, '70%', '90%');
            },
            // 打开处理回复消息界面
            handle_msg(msgid = null) {
                url = "<?php echo url('customer/handle_msg_view'); ?>" + "?msgid=" + msgid;
                layerWindow('添加客服消息', url, '70%', '65%');
            },
            // 消息
            send_msg(msgid) {
                var url = '<?php echo url("customer/send_msg_view"); ?>' + '?msgid=' + msgid;
                layerWindow('客服消息', url, '35%', '55%');
            },
            // 打开客服消息发送任务列表界面
            task_view() {
                var url = '<?php echo url("customer/task_view"); ?>';
                layerWindow('任务列表', url, '45%', '75%');
            },
            // 删除客服消息
            del_msg(msgid) {
                var that = this;
                that.$confirm('删除此消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: "<?php echo url('customer/del_msg'); ?>" + "?msgid=" + msgid,
                        success: function (res) {
                            if (res) {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.refresh();
                            } else {
                                that.$message.error('删除失败');
                            }
                        },
                        error: function () {
                            layerAlert('系统错误,请联系管理员');
                        }
                    });
                });
            },
            // 批量删除客服消息
            del_msg_list() {
                var that = this;
                if (that.id_list.length) {
                    that.loading = true;
                    that.$confirm('删除这些消息?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            type: 'post',
                            cache: false,
                            url: '<?php echo url("customer/del_msg_list"); ?>',
                            data: {id_list: that.id_list},
                            success: function (res) {
                                layerAlert('成功删除' + res + '个消息');
                                that.refresh();
                                that.loading = false;
                            },
                            error: function () {
                                that.loading = false;
                                layerAlert('发生系统错误,请与管理员联系！');
                            }
                        });
                    });
                } else {
                    that.$message.error('至少选择一个消息');
                }
            },
        }
    });
    vm.get_list();
</script>
</html>